<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>store</title>
</head>

<body>
    <button type="button" class="btn">添加数据</button>
    <button type="button" class="btn">获取数据</button>
    <button type="button" class="btn">删除数据</button>
    <button type="button" class="btn">清空数据</button>
    <script>
        const createStore = (isLocal = false) => {
            const store = window[isLocal ? 'localStorage' : 'sessionStorage'];
            return {
                set(key, data) {
                    return store.setItem(key, data)
                },
                get(key) {
                    return store.getItem(key);
                },
                del(key) {
                    return store.removeItem(key);
                },
                clear() {
                    return store.clear();
                }
            }
        }
        const { set, get, del, clear } = createStore();
        document.querySelectorAll('.btn').forEach((item, index) => {
            item.addEventListener('click', () => {
                switch (index) {
                    case 0:
                        set('name', "eveningwater");
                        console.log('存储成功');
                        break;
                    case 1:
                        get('name');
                        console.log(get('name'))
                        console.log('获取成功')
                        break;
                    case 2:
                        del('name');
                        console.log('删除成功')
                        break;
                    case 3:
                        clear();
                        console.log('清空成功')
                        break;
                }
            })
        })
    </script>
</body>

</html>